<template>
  <page-frame :bg="isPc?'#323232':'#000'">
    <div class="Pc">
      <div
          style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;background:rgba(0,0,0,.2);z-index: 9999;display: flex;justify-content: center;align-items: center"
          v-if="isBetsModel">
        <div style="width: 90%;">
          <div
              style="background: #000;width: 100%;border-radius: 5px;padding:15px;max-height: 80vh;overflow: auto;border:1px solid #aaa;"
              class="bets-model">
            <div class="bet-ul">
              <div class="li" v-for="(item,index) in betsData" :key="index">
                <div class="right">
                  <div class="item">
                    <span class="num">{{ item.teamA[language] }} VS {{ item.teamB[language] }}</span>
                    <span class="text">
                      <span v-if="item.teamAscore!=null">
                     {{ item.teamAscore + ':' + item.teamBscore }}
                  </span>
                    <span v-else>-</span></span>
                  </div>
                  <div class="item item1">
                    <span class="time">投注：{{ item.text }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <img
                alt=""
                height="40"
                src="@/assets/images/close-baise.png"
                width="40"
                style="display: inline-block;margin-top: 20px"
                @click="isBetsModel = false"
            />
          </div>
        </div>

      </div>
      <el-table
          :data="list"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          v-if="false"
      >

        <el-table-column type="expand">
          <template #default="props">

            <div m="4">
              <el-table :data="props.row.data">
                <el-table-column label="联赛">
                  <template #default="scope">
                    {{ scope.row.league[language] }}
                  </template>
                </el-table-column>
                <el-table-column label="赛事">
                  <template #default="scope">
                    {{ scope.row.teamA[language] }} VS {{ scope.row.teamB[language] }}
                  </template>
                </el-table-column>
                <el-table-column label="比分">
                  <template #default="scope">
                  <span v-if="scope.row.teamAscore!=null">
                     {{ scope.row.teamAscore + ':' + scope.row.teamBscore }}
                  </span>
                    <span v-else>-</span>

                  </template>

                </el-table-column>
                <el-table-column label="比赛时间" prop="time"/>
                <el-table-column label="下注内容">
                  <template #default="scope">
                    {{ scope.row.text }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>


        <el-table-column label="类型">
          <template #default="scope">
            {{
              scope.row.bet_type == 0 ? '足球13' : scope.row.bet_type == 1 ? '波胆' : scope.row.data && scope.row.data.length == 1 ? '单场' : '过关'
            }}
          </template>
        </el-table-column>
        <el-table-column prop="time" label="下注时间"/>
        <el-table-column prop="qh" label="期号"/>
        <el-table-column prop="bet_amount" label="总金额"/>
        <el-table-column prop="winning_amount" label="中奖金额"/>
      </el-table>
      <div class="box">
        <div class="top">
          <div class="left">
            <img class="avatar" src="@/assets/images/banner.png"/>
            <div class="userinfo">
              <div class="name">
                {{ userInfo.username }}
              </div>
              <div class="box_num">
                <span>余额&nbsp;&nbsp;&nbsp;</span>
                ¥<span class="num">123.76</span>
                <img src="@/assets/images/shuaxin.png" @click="updateUderInfo"/>
              </div>
            </div>
          </div>

          <div class="right">
            <div class="button_list">
              <div class="item" @click="go('Recharge')">充值</div>
              <div class="item" @click="go('Extract')">提现</div>
            </div>
            <div class="my">
              <div class="item" @click="bets(0)">
                <img src="@/assets/icons/svg/bet.svg"/>
                <div>未结算</div>
              </div>

              <div class="item" @click="bets(1)">
                <img src="@/assets/icons/svg/bet2.svg"/>
                <div>已结算</div>
              </div>
              <div class="item" @click="go('UserInfo')">
                <img src="@/assets/icons/svg/my.svg"/>
                <div>我的账户</div>
              </div>
            </div>
          </div>


        </div>
        <div class="main">
          <div style="width: 100%" class="list">
            <div style="display: flex;text-align: center" class="li">
              <div style="flex: 1;">
                类型
              </div>
              <div style="flex: 1;">下注时间</div>
              <div style="flex: 1;">总金额</div>
              <div style="flex: 1;">中奖金额</div>
              <div style="flex: 1;">状态</div>
            </div>
            <div style="display: flex;text-align: center;cursor: pointer" v-for="(item,index) in list" :key="index"
                 class="li" @click="detail(index)">
              <div style="flex: 1;">{{
                  item.bet_type == 0 ? '足球13' : item.bet_type == 1 ? '波胆' : item.data && item.data.length == 1 ? '单场' : '过关'
                }}
              </div>
              <div style="flex: 1;">{{ item.time }}</div>
              <div style="flex: 1;">{{ item.bet_amount }}</div>
              <div style="flex: 1;">{{ item.winning_amount }}</div>
              <div style="flex: 1;display: flex;justify-content: center;align-items: center"
                   :class="{'c-0e9666':betsType == 1}">{{ betsType == 1 ? '已结算' : '未结算' }}
                <img
                    alt=""
                    height="14"
                    src="@/assets/images/right-baise.png"
                    width="14"
                    class="icon"
                /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Mobile">
      <div class="main-contain">
        <div class="bet-ul">
          <div class="li" v-for="(item,index) in list" :key="index">
            <div class="left">
              {{
                item.bet_type == 0 ? '足球13' : item.bet_type == 1 ? '波胆' : item.data && item.data.length == 1 ? '单场' : '过关'
              }}
            </div>
            <div class="right" @click="detail(index)">
              <div class="item">
                <span class="num">{{ item.bet_amount }}</span>
                <span class="text" :class="{'c-0e9666':betsType == 1}">{{ betsType == 1 ? '已结算' : '未结算' }}</span>
              </div>
              <div class="item item1">
                <span class="time">{{ item.time }}</span>
                <span class="total">{{ item.winning_amount }}</span>
              </div>
              <img
                  alt=""
                  height="14"
                  src="@/assets/images/right-baise.png"
                  width="14"
                  class="icon"
              />
            </div>
          </div>
        </div>
      </div>
      <div
          style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;background:rgba(0,0,0,.2);z-index: 9999;display: flex;justify-content: center;align-items: center"
          v-if="isBetsModel">
        <div style="width: 90%;">
          <div
              style="background: #000;width: 100%;border-radius: 5px;padding:15px;max-height: 80vh;overflow: auto;border:1px solid #aaa;"
              class="bets-model">
            <div class="bet-ul">
              <div class="li" v-for="(item,index) in betsData" :key="index">
                <div class="right">
                  <div class="item">
                    <span class="num">{{ item.teamA[language] }} VS {{ item.teamB[language] }}</span>
                    <span class="text">
                      <span v-if="item.teamAscore!=null">
                     {{ item.teamAscore + ':' + item.teamBscore }}
                  </span>
                    <span v-else>-</span></span>
                  </div>
                  <div class="item item1">
                    <span class="time">投注：{{ item.text }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <img
                alt=""
                height="40"
                src="@/assets/images/close-baise.png"
                width="40"
                style="display: inline-block;margin-top: 20px"
                @click="isBetsModel = false"
            />
          </div>
        </div>

      </div>
    </div>

  </page-frame>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, toRefs, watch} from "vue";
import {useRoute} from "vue-router/dist/vue-router";

export default {
  name: "bets",
  setup() {
    /* 全局挂载utils工具类 start */
    const {$api, $common, $validate, $router, $elUtils, $tokenUtils, $ext} =
        getCurrentInstance().proxy;
    /* 全局挂载 end */
    const state = reactive({
      isPc: $validate.isPc(),
      userInfo: $ext.getUser(),
      language: $common.getKeyVal("system", "language", true),
      //	页码
      page: 1,
      //数量
      limit: 20,
      //下注类型(复式:0,波胆:1,单注:2)默认全部
      bet_type: '',
      //开始时间[2022-11-01]
      k_time: '',
      //	结束时间[2022-11-02]
      e_time: '',
      list: [],
      betsType: '',
      isBetsModel: false,
      betsData: [],
    });
    const $route = useRoute()
    onMounted(() => {

      state.betsType = $route.query.type
      getData()
    });
    watch(() => $route.query.type,
        (newValue, oldValue) => {
          getData()
        }
    )
    const getData = () => {
      var par = {
        page: state.page,
        limit: state.limit,
        bet_type: state.bet_type,
        k_time: state.k_time,
        e_time: state.e_time,
        state: $route.query.type,
      }
      $api.eventBotOrders(par).then((res) => {
        state.list = res.data.data
        if (state.list && state.list.length) {
          for (const main of state.list) {
            for (const item of main.data) {

              if (main.bet_type == 0) {
                // 足球13
                if (item.data && item.data.length) {
                  let text = []
                  for (const i of item.data) {
                    if (i == 0) {
                      text.push('客')
                    } else if (i == 1) {
                      text.push('和')
                    } else if (i == 3) {
                      text.push('主')
                    }
                  }
                  item.text = text
                }

              } else if (main.bet_type == 1) {
                // 波胆
                item.text = item.data.TeamA_num + ' : ' + item.data.TeamB_num
              } else if (main.bet_type == 2) {
                // 过关
                if (item.data == 0) {
                  item.text = '客'
                } else if (item.data == 1) {
                  item.text = '和'
                } else if (item.data == 3) {
                  item.text = '主'
                }
              }
            }
          }
        }
        console.log('state.list', state.list)

      })
    }

    //查看详情
    const detail = (index) => {
      console.log(state.list[index])
      console.log('language', state.language)
      state.betsData = state.list[index].data
      state.isBetsModel = true
    }

    const go = (name) => {
      $router.push({name: name});
    }
    // 跳转注单
    const bets = (type) => {
      $router.push({
        path: "/bets",
        query: {
          type: type
        }
      });
    };

    const updateUderInfo = () => {
      $ext.getUser('', true)
    }


    return {
      ...toRefs(state),
      detail,
      go,
      bets,
      updateUderInfo,
    };
  }

}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import 'bets';

</style>